<style lang="less">
  .charging-formula{
    line-height: 38px;
    margin-bottom: 10px;
    .el-form {
      display: inline-block;
    }
    .el-input {
      width: 50px;
    }
  }
</style>

<template>
  <div class="charging-formula">
    <el-radio :label="label">
      <el-form :model="form" ref="form" :inline="true">
        <template v-for="(item, index) in tokens">
          <template v-if="item ==='num'">
            <el-form-item :key="index + 'i'" :prop="item + index" :rules="{ required: true, message: '请输入数字', trigger: 'blur' }">
              <el-input v-model="form[item + index]" :disabled="disabled"></el-input>
            </el-form-item>
          </template>
          <template v-else>
            {{item}}
          </template>
        </template>
      </el-form>
    </el-radio>
  </div>
</template>

<script>
export default {
  name: 'ChargingFormula',
  componentName: 'ChargingFormula',
  data () {
    return {
      opt: {
        '+': '＋',
        '-': '－',
        '*': '×',
        '/': '÷',
        'standardPrice': '标准价格',
        'startingPrice': '起步运价'
      },
      billingTypeName: {
        112003001: '重量',
        112003002: '体积',
        112003003: '件数'
      },
      form: {},
      tokens: []
    };
  },
  watch: {
    disabled (val) {
      if (val) {
        this.$refs.form.resetFields();
      }
    }
  },
  props: {
    billingType: {
      type: Number,
      default: 112003001
    },
    startGraded: {
      type: Number,
      default: 0
    },
    endGraded: Number,
    label: String,
    disabled: {
      type: Boolean,
      default: false
    },
    description: String,
    expression: {
      type: Array,
      default: function () {
        return [];
      }
    }
  },
  methods: {
    getVal () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let exps = this.expression.map((item, index) => {
            if (item === 'num') {
              return this.form[item + index];
            } else {
              return item;
            }
          });
          let tokens = exps.map(o => this.opt[o] || o);
          let message = tokens.join('');
          let description = '当' + this.startGraded + '≤' + this.billingTypeName[this.billingType] + (this.endGraded ? '≤' + this.endGraded : '') + ',' + message;
          let e = exps.join('');
          this.$emit('comfirmSuccess', {
            expression: e,
            description: description,
            billingType: this.billingType,
            startGraded: this.startGraded,
            endGraded: this.endGraded
          });
        }
      });
    }
  },
  mounted () {
    this.expression.forEach((item, index) => {
      if (item === 'num') {
        this.$set(this.form, item + index, null);
      }
    });
    this.tokens = this.expression.map(o => this.opt[o] || o);
  }
};
</script>
